import { useState, useEffect } from 'react';
import { ProFormText } from '@ant-design/pro-components';
import { ProForm } from '@ant-design/pro-components';
import { Button, Table, Form, Tooltip, Modal, message } from 'antd';
import { PageContainer } from '@ant-design/pro-components';
// import { profileActivate, activitySearch } from '@/services/profile';
import { activitySearch } from '@/services/activity';
import styles from './style.less';

const { confirm } = Modal;

const BatchManageList: React.FC = () => {
  const [spining, setSpining] = useState(false);
  const [pageNo, setPageNo] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [total, setTotal] = useState(1);
  const [dataSource, setDataSource] = useState([] as API.ProfileListItem[]);
  const [form] = Form.useForm();

  // 获取列表
  const getList = async () => {
    console.log('from', form.getFieldsValue());
    const formValue = form.getFieldsValue();
    const param: API.ProfileSearchInfo = {
      ...formValue,
      pageNo: pageNo,
      pageSize: pageSize,
    };
    setSpining(true);
    const { code, data } = await activitySearch(param);
    setSpining(false);
    if (code === 200 && data) {
      const arr: API.ProfileListItem[] = [];
      data.rows.forEach((item: any) => {
        arr.push({
          ...item,
        });
      });
      setDataSource(arr);
      setTotal(data.totalCount);
    }
    return {};
  };

  useEffect(() => {
    getList();
  }, [pageNo, pageSize]);

  // 刷新
  const handleOperate = (record: any, type: string) => {
    confirm({
      // title: '提醒',
      // icon: <ExclamationCircleOutlined style={{ color: '#3D50D6' }} />,
      content: `确认${type}活动：${record.activityId}？`,
      async onOk() {
        const params = {
          activityIds: record.activityId,
        };
        // try {
        //   const { code, data } = await profileActivate({ ...params });
        //   if (code === 200 && data) {
        //     message.success('操作成功');
        //     getList();
        //   } else {
        //     // message.error(msg);
        //   }
        // } catch (error) {}
      },
      onCancel() {},
    });
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 60,
    },
    {
      title: '活动id',
      dataIndex: 'activityId',
      key: 'activityId',
      width: 300,
      ellipsis: true,
      render: (text: any, record: any) => (
        <Tooltip title={record.activityId || ''} placement="topLeft">
          {record.activityId}
        </Tooltip>
      ),
    },
    {
      title: '批次ID',
      dataIndex: 'groupId',
      key: 'groupId',
      width: 200,
    },
    {
      title: '批次名称',
      dataIndex: 'groupName',
      key: 'groupName',
      width: 280,
      ellipsis: true,
      render: (text: any, record: any) => (
        <Tooltip title={record.activity || ''} placement="topLeft">
          {record.activity}
        </Tooltip>
      ),
    },
    {
      title: '兑换码有效期开始时间',
      dataIndex: 'couponCodeStartTime',
      key: 'couponCodeStartTime',
      width: 220,
    },
    {
      title: '兑换码有效期结束时间',
      dataIndex: 'couponCodeEndTime',
      key: 'couponCodeEndTime',
      width: 220,
    },

    {
      title: '是否需要激活码',
      dataIndex: 'needActiveCode',
      key: 'needActiveCode',
      width: 220,
    },
    {
      title: '激活码前缀',
      dataIndex: 'activeCodePrex',
      key: 'activeCodePrex',
      width: 220,
    },
    {
      title: '激活码开始码',
      dataIndex: 'activeCodeFrirst',
      key: 'activeCodeFrirst',
      width: 220,
    },
    {
      title: '激活码结束码',
      dataIndex: 'activeCodeLast',
      key: 'activeCodeLast',
      width: 220,
    },
    {
      title: '是否激活限制',
      dataIndex: 'activeLimitation',
      key: 'activeLimitation',
      width: 220,
    },
    {
      title: '可激活餐厅号',
      dataIndex: 'storeIds',
      key: 'storeIds',
      width: 220,
    },
    {
      title: '激活码产品Id',
      dataIndex: 'productId',
      key: 'productId',
      width: 220,
    },
    {
      title: '激活码产品金额（订单单价）',
      dataIndex: 'productPrice',
      key: 'productPrice',
      width: 220,
    },
    {
      title: '激活码效期开始时间',
      dataIndex: 'activeCodeStartTime',
      key: 'activeCodeStartTime',
      width: 220,
    },
    {
      title: '激活码效期结束时间',
      dataIndex: 'activeCodeEndTime',
      key: 'activeCodeEndTime',
      width: 220,
    },
    {
      title: '生成量',
      dataIndex: 'codeCount',
      key: 'codeCount',
      width: 220,
    },
    {
      title: '合同编号',
      dataIndex: 'contractNo',
      key: 'contractNo',
      width: 220,
    },
    {
      title: '申请人',
      dataIndex: 'groupOwner',
      key: 'groupOwner',
      width: 220,
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 80,
      align: 'center',
      render: (text: any, record: any) => (
        <div>
          <a onClick={() => handleOperate(record, '刷新')}>刷新</a>&nbsp;&nbsp;
        </div>
      ),
    },
  ];

  const onChangePagination = (pagination: any) => {
    setPageNo(pagination.current);
    setPageSize(pagination.pageSize);
  };

  return (
    <PageContainer>
      <div className={styles['form-body']}>
        <ProForm
          form={form}
          layout="horizontal"
          submitter={false}
          initialValues={{
            activityId: '',
            onlineCode: '',
            activityGroup: '',
            activityGroupRound: '',
            activityStartTime: null,
            activityEndTime: null,
            activity: '',
            productIdRule: '',
            productIdBackupEx: '',
          }}
        >
          <ProForm.Group>
            <ProFormText
              labelCol={{ span: 9 }}
              width="sm"
              name="activityId"
              label="活动定义"
              placeholder="activityId"
            />
            <ProFormText
              labelCol={{ span: 9 }}
              width="sm"
              name="groupId"
              label="批次ID"
              placeholder="groupId"
            />
            <ProFormText
              labelCol={{ span: 9 }}
              width="sm"
              name="contractNo"
              label="合同编号"
              placeholder="contractNo"
            />
            <ProFormText
              labelCol={{ span: 9 }}
              width="sm"
              name="groupOwner"
              label="申请人"
              placeholder="groupOwner"
            />
            <ProFormText
              labelCol={{ span: 9 }}
              width="sm"
              name="groupName"
              label="批次名称"
              placeholder="groupName"
            />
          </ProForm.Group>
        </ProForm>
        <div className={styles['query-body']}>
          <Button
            style={{ marginLeft: 16 }}
            onClick={() => {
              setPageNo(1);
              setPageSize(20);
              getList();
            }}
            type="primary"
          >
            查询
          </Button>
        </div>
      </div>

      <Table
        // @ts-ignore
        columns={columns}
        scroll={{ x: 1500 }}
        loading={spining}
        dataSource={dataSource}
        onChange={onChangePagination}
        pagination={{
          current: pageNo,
          pageSize,
          total,
          showSizeChanger: true,
          showTotal: (totals) => `共 ${totals} 条`,
        }}
      />
    </PageContainer>
  );
};

export default BatchManageList;
